<template>
  <!-- 顶部菜单栏 -->

  <!-- 这里使用动态属性 -->
  <div :class="[store.isDark ? 'title_class_dark' : 'title_class_bright']">
    <!-- 标题栏 -->
    <div class="app-title">
      <div class="app-logo">
        <!-- 图标 -->
        <img class="app-logo-img" src="../assets/logo.png" alt="">
        <span class="app-name">FILE EDITOR</span>
      </div>
      <div class="file-path">
        <!-- 图标 -->
        <img class="file-path-img" src="../assets/blue_location.png" alt="">
        <span>{{ store.currentFile }}</span>
      </div>
    </div>


    

    <div class="menu-buttons">

      <!-- 调用rust写法 -->
      <button class="menu-button" @click="openFile">
        <img class="menu-button-read-img" src="../assets/doc_blue.png" alt="">
        <span>读取文件</span>
      </button>

      <!-- 浏览器写法 -->
      <!-- <button class="menu-button" @click="$refs.fileInput.click()">
        <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none">
        <img class="menu-button-read-img" src="../assets/doc_blue.png" alt="">
        <span>读取文件</span>
      </button> -->


      <button class="menu-button" @click="makeFile">
        <img class="menu-button-read-img" src="../assets/blue_editor.png" alt="">
        <span>新建文件</span>
      </button>


      <button class="menu-button" @click="isTopUp">
        <img class="menu-button-read-img" src="../assets/arrow-up.png" alt="">
        <span>{{ isTopUpFlag ? "取消置顶" : "窗口置顶" }}</span>
      </button>

      <button class="menu-button" @click="switchMode">
        <img class="menu-button-read-img" src="../assets/arrow-down.png" alt="">
        <span>{{ modeFlag ? "白天模式" : "夜间模式" }}</span>
      </button>

    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { open } from '@tauri-apps/plugin-dialog';
import { useStore } from '../store/store'
import { Window } from '@tauri-apps/api/window'
import { inject } from "vue";

const dialog = inject("dialog")
const inputDialog = inject("inputDialog")
const toast = inject("toast")


// 获取窗口实例
const appWindow = new Window('main')
const store = useStore()
const isTopUpFlag = ref(false)
const modeFlag = ref(false)
const isTopUp = async () => {
  isTopUpFlag.value = !isTopUpFlag.value
  await appWindow.setAlwaysOnTop(isTopUpFlag.value)
  // toast("操作成功!!!", "success")

}

//打开文件openFile
const openFile = async function () {
  // 打开
  const file = await open({
    filters: [{ name: 'Text', extensions: ['txt'] }],
    multiple: false
  });

  if (file != null) {
    //封装异步取出
    const convertFilePath = file.replace(/\\/g, '\\')
    //判断store的fileList是否存在，不存在添加
    if (!store.fileList.includes(convertFilePath)) {
      //添加到数组当中
      store.fileList.push(convertFilePath)
      toast("添加成功!!!", "success")

    } else {
      toast("文件列表已经存在!!!", "info")
    }

  }
}
const makeFile = async function () {
  //进行弹窗
  console.log("makeFile");
  const result = await inputDialog("提示")
  if (result != '') {
    handleConfirm(result)
    // toast("新建成功!!!", "success")
  }

}


async function handleConfirm(fileName) {
  console.log('用户点击了确认:', fileName)
  // makeFile(fileName)

  if (!fileName) return;

  try {
    const filePath = await invoke('create_txt_file', { 'fileName': fileName });
    console.log('文件创建成功:', filePath)

    // 添加到文件记录列表
    const convertFilePath = filePath.replace(/\\/g, '\\')
    if (!store.fileList.includes(convertFilePath)) {
      //添加到数组当中
      store.fileList.push(convertFilePath)
      store.currentFile = convertFilePath
    }

  } catch (err) {
    //进行弹窗显示，使用dialog进行显示
    // dialog('错误提示',err)
    toast(err, 'error')
    console.error('创建失败:', err)
  }
}

const switchMode = function () {
  modeFlag.value = !modeFlag.value
  console.log("切换成功！！！");

  store.isDark = !modeFlag.value
}

watch(modeFlag, (newValue, oldValue) => {

  //
  console.log("newValue:", newValue);
  console.log("oldValue:", oldValue);


})


</script>


<style scoped>
/* 顶部菜单栏样式 */

.title_class_dark {
  color: #d4d4d4;
  background-color: #1e1f24;
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.title_class_bright {
  color: #d4d4d4;
  background-color: #6b4343;
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: --accent-color;
}

.app-logo i {
  font-size: 20px;
}

.app-logo-img {
  height: 30px;
  height: 30px;
  border-radius: 5px;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.file-path {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.file-path-img {
  height: 20px;
  height: 20px;
  border-radius: 5px;
}


.menu-buttons {
  display: flex;
  gap: 10px;
  height: 100%;
  align-items: center;
}

.menu-button {
  height: 32px;
  padding: 0 16px;
  background: #3a3d46;
  border: none;
  border-radius: 6px;
  color: #e1e1e6;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.menu-button-read-img {
  height: 20px;
  width: 20px;
  border-radius: 5px;
}

.menu-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.menu-button:hover {
  background: --accent-color;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(77, 120, 204, 0.3);
}

.menu-button:hover::after {
  opacity: 1;
}

.menu-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(44, 92, 189, 0.2);
}
</style>
